// 发货单消耗记录组件,注意要用反引号
Vue.component('invoice-expend-dialog', {
    template: `
       <el-dialog title="发货单消耗" :visible.sync="expendDialog.show" width="70%" center :close-on-click-modal="0"
        @close="cancel" v-loading="expendDialog.loading" custom-class="handle-expend-dialog">
         <el-descriptions :column="6" size="mini" border class="invoice-data-desc" label-class-name="invoice-data-desc-label">
            <template slot="title">
                工程信息
                <el-button type="success" size="mini" @click="syncExpend">同步消耗</el-button>
                <!--<el-button type="success" size="mini" @click="syncExpend2">同步消耗2</el-button>-->
            </template>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>项目名称
                </template>
                {{invoice.conName}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-s-operation"></i>施工部位
                </template>
                {{invoice.site}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-s-operation"></i>强度等级
                </template>
                {{invoice.strengthName}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-s-operation"></i>本车方量
                </template>
                {{invoice.proStere}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-truck"></i>累计车次
                </template>
                {{invoice.totalCar}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-s-operation"></i>累计方量
                </template>
                {{invoice.totalStere}}
            </el-descriptions-item>
         </el-descriptions>
            <!--<el-form :inline="true" class="demo-form-inline">
                <el-form-item label="项目名称">
                    {{invoice.conName}}
                </el-form-item>
                <el-form-item label="施工部位">
                    {{invoice.site}}
                </el-form-item>
                <el-form-item label="强度等级">
                    {{invoice.strengthName}}
                </el-form-item>
                <el-form-item label="累计车次">
                    {{invoice.totalCar}}
                </el-form-item>
                <el-form-item label="累计方量">
                    {{invoice.totalStere}}
                </el-form-item>
            </el-form>-->
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <template v-for="batchExpend in batchExpends">
                    <el-tab-pane :label="'第' + batchExpend.batchNum + '盘'" :name="batchExpend.batchNum">
                        <el-table :data="batchExpend.labExpendList" style="width: 100%" border>
                          <el-table-column label="盘方量" width="100">
                                {{batchExpend.batchStere}}
                          </el-table-column>
                          <el-table-column label="材料名称" prop="nameNorms" width="150"></el-table-column>
                          <el-table-column label="ERP仓位" prop="storageName" width="150"></el-table-column>
                          <el-table-column label="工控仓位" prop="controlStorage" width="150"></el-table-column>
                          <el-table-column label="工控含水量(%)" prop="controlWater" width="150"></el-table-column>
                          <el-table-column label="单方设定用量(KG)" width="150">
                            <template slot-scope="scope">
                                {{initUnitValue(scope.row.formulaQuantity,batchExpend.batchStere)}}
                            </template>
                          </el-table-column>
                          <el-table-column label="本盘设定用量(KG)" prop="controlSetQuantity" width="150"></el-table-column>
                          <el-table-column label="本盘实际用量(KG)" prop="controlRealQuantity" width="150"></el-table-column>
                          <el-table-column label="下料时间" prop="useTime" width="180"></el-table-column>
                          <el-table-column label="误差值" prop="conErrorValue" width="100"></el-table-column>
                          <el-table-column label="误差率(%)" prop="conErrorRate" width="100"></el-table-column>
                        </el-table>
                    </el-tab-pane>
                </template>
            </el-tabs>
        </el-dialog>
      `,
    props: {
        invoice: {
            type: Object,
            //  当参数是对象时,需要默认数据
            default: function () {
                let inv = {
                    id: null,
                    totalCar: null,
                    totalStere: null,
                };
                return inv;
            }
        },
        invoiceId: null,
    },
    data() {
        return {
            activeName: '',
            batchExpends: [],
            expendDialog: {
                show: false,
                loading: false,
            },
        };
    },
    created() {
        let that = this;
        that.invoiceId = that.invoice.id;
        that.loadExpendDatas();
    },
    methods: {
        //  加载消耗记录
        loadExpendDatas() {
            let that = this;
            let invId = that.invoiceId;
            if (isNull(invId)) {
                that.$message({
                    showClose: true,
                    message: '请选择正确的发货单',
                    type: 'error'
                });
                return;
            }
            that.expendDialog.show = true;
            that.expendDialog.loading = true;
            $.ajax({
                type: "post",
                url: "/lab-expend/invoice/expend/" + invId,
                async: true,
                dataType: 'json',
                data: {},
                success: function (res) {
                    if (res.code == 0) {
                        let batchExpends = res.data;
                        if (batchExpends == null || batchExpends.length == 0) {
                            that.$message({
                                showClose: true,
                                message: '该发货单没有消耗记录',
                            });
                            that.cancel();
                            return;
                        }
                        that.batchExpends = batchExpends;
                        that.activeName = batchExpends[0].batchNum;
                    } else {
                        that.$message({
                            showClose: true,
                            message: '查询发货单消耗数据失败：' + res.msg,
                            type: 'error'
                        });
                    }
                },
                error: function (res) {
                    that.$message({
                        showClose: true,
                        message: '请求失败，请联系管理员',
                        type: 'error'
                    });
                    return;
                },
                complete: function (XMLHttpRequest, status) {
                    that.expendDialog.loading = false;
                }
            })
        },
        handleClick(tab, event) {
            /*let that = this;
            let index = tab.index;
            let dayValue = that.dayValues[index];
            //  销售人员名
            let saleMan = dayValue.sheetName;*/
        },
        //  计算单方设定用量
        initUnitValue(formulaQuantity, batchStere) {
            let that = this;
            let t = formulaQuantity / batchStere;
            t = parseFloat(formulaQuantity / batchStere).toFixed(2);
            return t;
        },
        //  取消添加
        cancel() {
            let that = this;
            //  调用父级的关闭弹窗
            this.$emit("closed")
        },
        //  同步消耗
        syncExpend() {
            let that = this;
            let invId = that.invoiceId;
            if (isNull(invId)) {
                that.$message({
                    showClose: true,
                    message: '请选择正确的发货单',
                    type: 'error'
                });
                return;
            }
            that.expendDialog.loading = true;
            $.ajax({
                type: "PUT",
                url: "/pro/invoice/sync/storage/" + invId,
                async: true,
                data: {},
                success: function (res) {
                    if (res.code == 0) {
                        that.$message({
                            showClose: true,
                            message: '同步成功,请稍后查看数据',
                            type: 'success'
                        });
                    } else {
                        that.$message({
                            showClose: true,
                            message: '查询发货单消耗数据失败：' + res.msg,
                            type: 'error'
                        });
                    }
                },
                error: function (res) {
                    that.$message({
                        showClose: true,
                        message: '请求失败，请联系管理员',
                        type: 'error'
                    });
                    return;
                },
                complete: function (XMLHttpRequest, status) {
                    that.expendDialog.loading = false;
                }
            })
        },
        syncExpend2() {
            let that = this;
            let invId = that.invoiceId;
            if (isNull(invId)) {
                that.$message({
                    showClose: true,
                    message: '请选择正确的发货单',
                    type: 'error'
                });
                return;
            }
            that.expendDialog.loading = true;
            $.ajax({
                type: "PUT",
                url: "/pro/invoice/sync/storage/backup/" + invId,
                async: true,
                data: {},
                success: function (res) {
                    if (res.code == 0) {
                        that.$message({
                            showClose: true,
                            message: '同步成功,请稍后查看数据',
                            type: 'success'
                        });
                    } else {
                        that.$message({
                            showClose: true,
                            message: '查询发货单消耗数据失败：' + res.msg,
                            type: 'error'
                        });
                    }
                },
                error: function (res) {
                    that.$message({
                        showClose: true,
                        message: '请求失败，请联系管理员',
                        type: 'error'
                    });
                    return;
                },
                complete: function (XMLHttpRequest, status) {
                    that.expendDialog.loading = false;
                }
            })
        },
    }
});

// 创建 Vue 实例
new Vue({
    el: '#app',
    data() {
        return {};
    }
});
